<script setup lang="ts">
import { rsaEncryption } from '@/utils';
import { useSubmit } from '@/views/user/use/use-submit';
import { getBlobUrl, trimBlank } from '@vc/utils';
import { getCaptcha } from '../apis';
import type { FormInstance } from 'element-plus';
import { LoginTabEnum, pageCfg, rules } from '../config';
import { LINK_REG, LINK_FORGOT } from '@/router/constants';
import UserFormItem from '../components/user-form-item.vue';
import PwdFormItem from '../components/pwd-form-item.vue';
import { onBeforeUnmount } from 'vue';

interface Props {
  activeName: string;
}

const { activeName } = defineProps<Props>();

// 验证码
const { data: codeData, run: handleGetVerifyImage, loading: verifyPending } = useRequest(getCaptcha);

// 表单数据
const formData = reactive({
  account: '',
  password: '',
  verifyCode: ''
});

const ruleFormRef = ref<FormInstance>();

const { loading, errMess, handleClick } = useSubmit();

// 验证码更换
const handleChangeCode = (clean = true) => {
  ruleFormRef.value?.clearValidate();
  handleGetVerifyImage();
  if (clean) {
    formData.verifyCode = '';
  }
};

// 临时的验证码链接
const blobUrl = computed(() => {
  return getBlobUrl(codeData.value?.jpgBase64);
});

/** 提交 */
const handleSubmit = async () => {
  return await handleClick(
    ruleFormRef.value,
    {
      captchaKey: codeData.value.captchaKey,
      captchaValue: formData.verifyCode,
      password: rsaEncryption.encrypt(formData.password),
      phone: trimBlank(formData.account, 'all')
    },
    'login',
    () => {
      handleChangeCode(false);
    }
  );
};

watch(
  () => activeName,
  (val) => {
    if (val === LoginTabEnum.TAB_PHONE) {
      ruleFormRef.value?.clearValidate();
    }
  }
);

onBeforeUnmount(() => {
  if (blobUrl.value) {
    window.URL.revokeObjectURL(blobUrl.value);
  }
});
</script>

<template>
  <el-form ref="ruleFormRef" :model="formData" @keypress.enter="handleSubmit">
    <!--account-->
    <div class="input-style">
      <user-form-item v-model:account="formData.account" :errorMess="errMess.account" />
    </div>
    <!--pwd-->
    <div class="input-style">
      <pwd-form-item v-model:password="formData.password" :rules="rules.loginPwd" :placeholder="pageCfg.pwaPlaceholder" :errorMess="errMess.pwd" />
    </div>
    <!--code-->
    <el-form-item prop="verifyCode" :rules="rules.pictureCode" :error="errMess.code">
      <div class="input-style w-full flex justify-between">
        <vc-input prefix-icon="vi-yanzheng" type="number" maxlength="4" :placeholder="pageCfg.codePlaceholder" class="input" clearable v-model="formData.verifyCode" />
        <vc-image v-loading="verifyPending" alt="验证码" title="看不清楚？换一张" class="cursor-pointer" :src="blobUrl" @click.stop="handleChangeCode" />
      </div>
    </el-form-item>
    <el-form-item>
      <div class="flex justify-end w-full">
        <vc-link type="primary" :route="LINK_FORGOT" :underline="false" class="text-14px text-[#02C680] font-500 leading-14px mt-2px mb-10px">{{ pageCfg.forgotText }}</vc-link>
      </div>
    </el-form-item>
    <!--submit-->
    <el-form-item>
      <el-button :loading="loading" class="change_color w-full h-52px bg-[#02C680] border-0 text-18px leading-21px font-500 mb-11px" type="primary" @click="handleSubmit">登录</el-button>
    </el-form-item>
    <div class="flex-center mb-18px">
      <span class="no-account">没有账号？&nbsp;</span>
      <vc-link type="primary" :route="LINK_REG" :underline="false" class="text-[#02C680]">立即注册</vc-link>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
  :deep(.input-style) {
    .el-form-item {
      margin-bottom: 24px;
    }
    .vc-input {
      border: 0;
      height: 52px;
      font-size: 16px;
      flex: 1;
      input::-webkit-input-placeholder {
        color: rgba(153, 153, 153, 1);
      }
      //改变input自动填充背景颜色
      input:-internal-autofill-previewed,
      input:-internal-autofill-selected {
        -webkit-text-fill-color: #808080;
        transition: background-color 1000s ease-out 0.5s;
      }
      .vc-input__wrapper {
        padding-left: 16px;
        background: rgba(243, 243, 243, 0.6);
        .vc-icon {
          width: 20px;
          height: 20px;
          margin-right: 16px;
        }
        .vc-input__inner {
          width: 96px;
          font-weight: 400;
          color: #999999;
          line-height: 19px;
      }
      }
    }
    .vc-image {
      width: 102px;
      height: 52px;
      margin-left: 12px;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .no-account {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 14px;
  }
  :deep(.change_color){
    &:hover{
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
    &:active {
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
    &:focus {
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
  }
</style>
